import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  TextInput,
  TouchableHighlight,
  TouchableWithoutFeedback
} from 'react-native'
import { connect } from 'react-redux'

import HeaderDefault from '../../components/header/HeaderDefault'
import { getFeeItem } from '../../netServer/signs_net'
import Toast from 'react-native-simple-toast'

class FeeProList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      prolist: [],
      prolistT: [],
      searchText: ''
    }

    this._onChangeText = this._onChangeText.bind(this)
    this._renderItem = this._renderItem.bind(this)
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        title="选择项目"
        backBtnOnPress={() => {
          navigation.goBack()
        }}
      />
    )
  })

  componentDidMount() {
    this.loadFeeList()
  }

  loadFeeList() {
    // let params = {
    //   pageSize: 2000,
    //   pageNo: 1
    // }

    let params = new FormData()
    params.append('pageSize', 2000)
    params.append('pageNo', 1)

    getFeeItem(params, response => {
      let { code, data, msg } = response

      if (code == '0') {
        this.setState({
          prolist: data.list,
          prolistT: data.list
        })
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER)
      }
    })
  }

  _renderItem(item) {
    return (
      <TouchableWithoutFeedback
        onPress={() => {
          this.props.navigation.state.params.callback(item.item)
          this.props.navigation.goBack()
        }}
      >
        <View
          style={{
            width: screenWidth,
            height: 60,
            paddingLeft: 15,
            borderBottomColor: '#efefef',
            borderBottomWidth: 1,
            justifyContent: 'center'
          }}
        >
          <Text>项目：{item.item.ITEMNAME}</Text>
          <Text>价格：{item.item.PRICE}</Text>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  _onSubmintEditing() {}

  _onChangeText(text) {
    this.setState({
      searchText: text
    })

    let arr = this.state.prolistT

    let arr2 = arr.filter(item => {
      let nameStr = item.ITEMNAME.toLowerCase()
      let lowSerStr = text.toLowerCase()

      return nameStr.includes(lowSerStr)
    })

    this.setState({
      prolist: arr2
    })
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        {/**  搜索栏  */}
        <View style={styles.searchBar}>
          <View style={{ width: 16 }} />

          <View
            style={{
              width: screenWidth - 70,
              height: 33,
              backgroundColor: '#f0f1f6',
              borderRadius: 18,
              alignItems: 'center',
              flexDirection: 'row'
            }}
          >
            <View style={{ width: 5 }} />
            <Image
              resizeMode="contain"
              style={{ width: 25, height: 15 }}
              source={require('./src/search.png')}
            />
            <TextInput
              onSubmitEditing={this._onSubmintEditing}
              underlineColorAndroid="transparent"
              // autoFocus={true}
              returnKeyType={'search'}
              placeholder="搜索"
              style={{
                width: screenWidth - 105,
                height: 32,
                borderColor: 'gray',
                fontSize: 14,
                padding: 0
              }}
              onChangeText={this._onChangeText}
              value={this.state.searchText}
            />
          </View>

          <TouchableHighlight
            underlayColor={'transparent'}
            onPress={() => {
              this._onChangeText('')
            }}
            style={{
              width: 54,
              height: 40,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <Text style={{ color: '#8c8b91' }}>取消</Text>
          </TouchableHighlight>
        </View>

        <FlatList
          keyExtractor={(item, index) => 'prolist' + index}
          data={this.state.prolist}
          renderItem={this._renderItem}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  searchBar: {
    width: screenWidth,
    height: 40,
    alignItems: 'center',
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e1e0'
  }
})

function select(store) {
  return {}
}

export default connect(select)(FeeProList)
